


import React, { FC, useEffect, useState, useRef } from 'react';
import { observer } from "mobx-react-lite";
import { Layout, Menu, MenuProps } from 'antd';
import clsx from 'clsx';
import styles from './pageLayout.module.less';
import hashHistory from '../../hashHistory';

const { Header, Content } = Layout;

interface IProps {
    children?: React.ReactNode;
}

const navItems = [
    { key: 'home', label: '首页', path: '/' },
    { key: 'fabric', label: 'Fabric.js', path: '/fabricDemo' },
    { key: 'ui', label: 'UI', path: '/ui' },
    { key: 'data', label: '数据', path: '/dataViewer' },
    { key: 'render', label: '渲染', path: '/render3DGoods' },
    { key: '3d', label: '3D', path: '/cannonDemo' },
    { key: 'cad', label: 'CAD', path: '/cadConversion' },
    { key: 'mysql', label: 'Mysql', path: '/mysqlEventManager' },
    { key: 'img', label: '图片', path: '/myImg' },
    { key: 'ollama', label: 'Ollama', path: '/ollamaTest' },
    { key: 'largeScreen', label: '大屏', path: '/largeScreen' },
    { key: 'web3', label: 'Web3', path: '/web3Demo' },
];

const getCurrentPath = () => {
    const path = window.location.hash.slice(1) || '/';
    return path;
};

// 组件
const PageLayout = observer((props: IProps) => {
    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [currentKey, setCurrentKey] = useState<string>(() => {
        const currentPath = getCurrentPath();
        return navItems.find(item => item.path === currentPath)?.key || 'home';
    });

    useEffect(() => {
        const updateSelectedKey = () => {
            const currentPath = getCurrentPath();
            const newKey = navItems.find(item => item.path === currentPath)?.key || 'home';
            setCurrentKey(newKey);
        };

        const handleHashChange = () => updateSelectedKey();
        const handlePopState = () => updateSelectedKey();

        window.addEventListener('hashchange', handleHashChange);
        window.addEventListener('popstate', handlePopState);

        updateSelectedKey();

        return () => {
            window.removeEventListener('hashchange', handleHashChange);
            window.removeEventListener('popstate', handlePopState);
        };
    }, [navItems]);

    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
        const item = navItems.find(nav => nav.key === key);
        if (item) {
            hashHistory.push(item.path);
        }
    };

    return (
        <div ref={dom} className={styles.pageLayout}>
            <Layout>
                <Header className={styles.header}>
                    <div className={styles.logo}>脚手架</div>
                    <Menu
                        theme="light"
                        mode="horizontal"
                        selectedKeys={[currentKey]}
                        className={styles.menu}
                        items={navItems}
                        onClick={handleMenuClick}
                    />
                </Header>
                <Content className={styles.content}>
                    {props.children}
                </Content>
            </Layout>
        </div>
    );
});

export default PageLayout;